<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>KAA电商管理后台_商品编辑</title>
	<script src="${path}/js/jquery-2.1.1.min.js"></script>
	<script src="${path}/js/sidebar-menu.js"></script>
	<script src="${path}/js/uploadPreview.js"></script>
	<link href="${path}/css/login.css" rel="stylesheet" media="all">
</head>
<body class="main">
	<h1>KAA电商管理后台</h1>
	<jsp:include page="sidebarNav.jsp"></jsp:include><!-- main_sidebar -->

	<div class="main_con_wrap">
		<form name="form1" method="post"
			  action="${path}/updateProductDetails" id="form1"  enctype="multipart/form-data">
		<div class="main_con goods_add">
			<!-- select_add -->
			<input id="pId" name="pId" value="${ProductsDetails.id}" style="display: none">
			<p>
				<span class="title fl">商品名称：</span>
				<input id="productName" type="text" name="productName" class="add_goodsname" value="${ProductsDetails.productName}"/>
				<span class="clear"></span>
			</p>

			
			<p>
				<span class="title fl">关键词：</span>
				<input id="keyWord" type="text" class="add_goodskey" name="keyWord" value="${ProductsDetails.keyWord}" placeholder="最长15个字符，以“，”逗号分隔" />
				<span class="clear"></span>
			</p>
			
			<p>
				<span class="title fl">是否上架：</span>
				<c:if test="${ProductsDetails.sell==1}">
					<span class="goodsdetails_txt fl">上架</span>
				</c:if>
				<c:if test="${ProductsDetails.sell==0}">
					<span class="goodsdetails_txt fl">下架</span>
				</c:if>
				<span class="clear"></span>
			</p>
			
			<p>
				<span class="title fl">库存：</span>
				<input id="stocks" type="text" class="add_goodsstock" name="stocks" value="${ProductsDetails.stocks}"/>
				<span class="clear"></span>
			</p>
			
			<p>
				<span class="title fl">基础销量：</span>
				<input id="basicsNum" type="text" class="add_goodssales" name="basicsNum" value="${ProductsDetails.basicsNum}"/>
				<span class="clear"></span>
			</p>
			
			<div class="add_price">
				<span class="title fl">价格：</span>
				
				<p>
				<span>市场价格</span>
				<input id="originalPrice" type="text" class="add_market_price" name="originalPrice" value="${ProductsDetails.originalPrice}"/>
				</p>
				
				<p>
				<span>销售价格</span>
				<input id="nowPrice" type="text" class="add_selling_price" name="nowPrice" value="${ProductsDetails.nowPrice}"/>
				</p>
				
				<p class="last_p">
				<span>成本价格</span>
				<input id="cost" type="text" class="add_cost_price" name="cost" value="${ProductsDetails.cost}"/>
				</p>
				<div class="clear"></div>
			</div>
			<div class="upload_img">
				<span class="title fl">商品小图：</span>
				<ul id="small_img" class="small_img">
				  <li>
					<label for="up_img_WU_FILE_0"></label>
					<input id="up_img_WU_FILE_0" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.carousel0}" id="imgShow_WU_FILE_0" width="100%" height="100%">
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILE_1"></label>
					<input id="up_img_WU_FILE_1" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.carousel1}" id="imgShow_WU_FILE_1" width="100%" height="100%">
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILE_2"></label>
					<input id="up_img_WU_FILE_2" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.carousel2}" id="imgShow_WU_FILE_2" width="100%" height="100%">
					<div class="dummy"></div>				
				  </li>
				  <li>
					<label for="up_img_WU_FILE_3"></label>
					<input id="up_img_WU_FILE_3" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.carousel3}" id="imgShow_WU_FILE_3" width="100%" height="100%">
					<div class="dummy"></div>				
				  </li>
				  <li>
					<label for="up_img_WU_FILE_4"></label>
					<input id="up_img_WU_FILE_4" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.carousel4}" id="imgShow_WU_FILE_4" width="100%" height="100%">
					<div class="dummy"></div>				
				  </li>
				  <div class="clear"></div>
				</ul>
				<div class="clear"></div>
			</div>
			
			<div class="goods_parameters">
				<span class="title fl">商品参数：</span>
				<ul>
					<li><span>品牌：</span><input type="text" class="goodspara_text" name="brand" id="brand" value="${ProductsDetails.brand}"/></li>
					<li><span>货号：</span><input type="text" class="goodspara_text"name="productCode" id="productCode" value="${ProductsDetails.productCode}"/></li>
					<li><span>摆型：</span><input type="text" class="goodspara_text"name="pendulumType" id="pendulumType" value="${ProductsDetails.pendulumType}"/></li>
					<li><span>领型：</span><input type="text" class="goodspara_text"name="collarType" id="collarType" value="${ProductsDetails.collarType}"/></li>
					<li><span>颜色：</span><input type="text" class="goodspara_text"name="color"id="color" value="${ProductsDetails.color}"/></li>
					<li><span>尺码：</span><input type="text" class="goodspara_text"name="size"id="size" value="${ProductsDetails.size}"/></li>
					<li><span>年份/季节：</span><input type="text" class="goodspara_text"name="year" id="year" value="${ProductsDetails.year}"/></li>
					<li><span>风格：</span><input type="text" class="goodspara_text" name="style" id="style" value="${ProductsDetails.style}"/></li>
					<li><span>面料：</span><input type="text" class="goodspara_text" name="fabric" id="fabric" value="${ProductsDetails.fabric}"/></li>
					<li><span>袖长：</span><input type="text" class="goodspara_text" name="sleeve" id="sleeve" value="${ProductsDetails.sleeve}"/></li>
					<li><span>适用年龄：</span><input type="text" class="goodspara_text"  name="age" id="age" value="${ProductsDetails.age}"/></li>
					<li><span>适用场景：</span><input type="text" class="goodspara_text"name="scene" id="scene" value="${ProductsDetails.scene}"/></li>
					<li><span>流行元素：</span><input type="text" class="goodspara_text" name="elements" id="elements" value="${ProductsDetails.elements}"/></li>
					<li><span>服饰工艺：</span><input type="text" class="goodspara_text" name="technology" id="technology" value="${ProductsDetails.technology}"/></li>
					<li><span>适用对象：</span><input type="text" class="goodspara_text" name="object" id="object" value="${ProductsDetails.object}"/></li>
					<li><span>腰型：</span><input type="text" class="goodspara_text" name="waistType" id="waistType" value="${ProductsDetails.waistType}"/></li>
					<div class="clear"></div>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="upload_img">
				<span class="title fl">大图展示：</span>			
				<ul id="big_img" class="big_img">
				  <li>
					<label for="up_img_WU_FILEs_0"></label>
					<input id="up_img_WU_FILEs_0" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.detailDrawing0}" id="imgShow_WU_FILEs_0" width="100%" height="100%">
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILEs_1"></label>
					<input id="up_img_WU_FILEs_1" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.detailDrawing1}" id="imgShow_WU_FILEs_1" width="100%" height="100%">
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILEs_2"></label>
					<input id="up_img_WU_FILEs_2" type="file" name="myfiles">
					<img src="${path}/${ProductsDetails.detailDrawing2}" id="imgShow_WU_FILEs_2" width="100%" height="100%">
					<div class="dummy"></div>				
				  </li>
				</ul>
				<div class="clear"></div>
			</div>
			
			
		</div><!-- main_con -->
			<button type="submit" class="memberadd_btn">保存</button>
		</form>
	</div><!-- main_con_wrap -->

	<div class="footer_copyright">
		<p>苏州知行合一网络科技有限公司提供技术支持，版权所有</p>
	</div><!-- footer_copyright -->

<script>
	/////////////////////////侧边栏按钮
	$.sidebarMenu($('.sidebar-menu'))
	/*
	function file_click(){
	var WARP = document.getElementById('small_img');//small_img upload
	var WARP_LI = WARP.getElementsByTagName('li');
	for(var i=0; i<WARP_LI.length;i++){
		new uploadPreview({ UpBtn: "up_img_WU_FILE_"+i, ImgShow: "imgShow_WU_FILE_"+i});		
	}
	var WARPs = document.getElementById('big_img');//big_img upload
	var WARP_LIs = WARPs.getElementsByTagName('li');
	for(var i=0; i<WARP_LIs.length;i++){
		new uploadPreview({ UpBtn: "up_img_WU_FILEs_"+i, ImgShow: "imgShow_WU_FILEs_"+i});		
	}
}
window.onload = file_click;*/
    $("#up_img_WU_FILE_0").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_0").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_1").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_1").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_2").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_2").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_3").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_3").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_4").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_4").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILEs_0").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILEs_0").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILEs_1").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILEs_1").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILEs_2").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILEs_2").attr("src", objUrl) ;
        }
    }) ;
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>
</body>
</html>